<template>
  <div class="name-card">
    <TitleBar title="品牌名片"></TitleBar>
    <header class="home-page-banner"></header>
    <div class="name-card-list">
      <NameCard v-for="item in brandList" :key="item.itemid" :img="item.thumb" :name="item.title" :desc="item.introduce" :itemid="item.itemid" @click.native="goDetail(item.itemid)"></NameCard>
    </div>
    <MyFooter :introduceShow="true"></MyFooter>
  </div>
</template>

<script>
import TitleBar from '../../components/TitleBar'
import NameCard from './components/NameCard'
import MyFooter from '../../components/MyFooter'
import * as events from '../../store/events'

export default {
  components: {
    TitleBar,
    NameCard,
    MyFooter
  },
  data() {
    return {
      brandList: []
    }
  },
  mounted() {
    this.$showLoading()
    this.$api.postCardList().then(data => {
      this.$hideLoading()
      // 解决ios回退白屏的问题，勿删
      window.scrollTo(0, 1)
      window.scrollTo(0, 0)
      if (data.data.status == 1) {
        this.brandList = data.data.cardList
        // 客服数据
        let service = {
          email: data.data.setting.service_email,
          tel: data.data.setting.service_tel
        }
        // 客服数据存到store中
        this.$store.commit(events.SET_SERVICE_INFO, service)
      }
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    goDetail(itemid) {
      if (this.$route.query.catid) {
        this.$router.push('/brandNameCardDetail/' + itemid + '/?catid=' + this.$route.query.catid)
      } else {
        this.$router.push('/brandNameCardDetail/' + itemid)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.name-card-list {
  margin-top: 0.66rem;
}
</style>
